// 用户资料
<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar class="login-headers" title="个人信息">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <input type="file" hidden ref="file" @change="onFile" />
    <!-- 个人信息 -->
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image class="image-user" fit="cover" round :src="userData.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      :value="userData.name"
      is-link
      @click="isNameShow = true"
    />
    <van-cell
      title="性别"
      :value="userData.gender == 0 ? '男' : '女'"
      is-link
      @click="isGenderShow = true"
    />
    <van-cell
      title="生日"
      :value="userData.birthday"
      is-link
      @click="isBirthdayShow = true"
    />

    <!-- 更改昵称弹出层 -->
    <van-popup
      v-model="isNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <user-name
        v-if="isNameShow"
        @close="isNameShow = false"
        v-model="userData.name"
      />
    </van-popup>

    <!-- 更改性别弹出层 -->
    <van-popup v-model="isGenderShow" position="bottom">
      <user-gender
        v-if="isGenderShow"
        @close="isGenderShow = false"
        v-model="userData.gender"
      />
    </van-popup>

    <!-- 更改生日弹出层 -->
    <van-popup v-model="isBirthdayShow" position="bottom">
      <user-birthday
        v-if="isBirthdayShow"
        @close="isBirthdayShow = false"
        v-model="userData.birthday"
      />
    </van-popup>

    <!-- 更改头像弹出层 -->
    <van-popup v-model="isPhotoShow" position="bottom" style="height:100%">
      <user-photo
        v-if="isPhotoShow"
        :img="saveImg"
        @close="isPhotoShow = false"
        @modPhote="userData.photo = $event"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入获取用户个人资料的接口
import { getUserData } from "@/api/user";
// 导入昵称弹出层
import userName from "./components/user-name";
// 导入性别弹出层
import userGender from "./components/user-gender";
// 导入生日弹出层
import userBirthday from "./components/user-birthday";
// 导入头像弹出层
import userPhoto from "./components/user-photo";

export default {
  // 组件名称
  name: "userProfile",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    userName,
    userGender,
    userBirthday,
    userPhoto,
  },
  // 组件状态值
  data() {
    return {
      userData: [], //存放个人资料
      isNameShow: false, //控制更改昵称弹出层
      isGenderShow: false, //控制更改性别弹出层
      isBirthdayShow: false, //控制更改生日弹出层
      isPhotoShow: false, //控制更改头像弹出层
      saveImg: null, //存储头像路径
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    async onoBtainData() {
      try {
        const { data } = await getUserData();
        // 将获取到的数据存入数组中
        this.userData = data.data;
      } catch (error) {
        this.$toast("用户资料获取失败，请稍后再试！");
      }
    },

    // 图片发生改变触发
    onFile() {
      // 获取文件对象
      const file = this.$refs.file.files[0];
      //   基于文章对象获取blob数据
      this.saveImg = window.URL.createObjectURL(file);
      // 显示弹出层
      this.isPhotoShow = true;
      // 将头像的value值重置
      this.$refs.file.value = "";
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.onoBtainData();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<style scoped lang="less">
.user-profile {
  .image-user {
    width: 60px;
    height: 60px;
  }
  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
